import { lazyBMapApiLoaderInstance } from "vue-bmap-gl";
import mapStyle from "@/assets/custom_map_config.json";
import {
  buildingCoordinateData,
  buildingCoordinateDetail,
  userStatisticsData,
} from "@/api/index";

// const BMapGL = window.BMapGL;
export const mixins = {
  data() {
    return {
      map: {},
      center: { lng: 108.393817, lat: 31.161733 },
      zoom: 16,
      markers: [],
      colors: [
        this.$store.state.redIcon,
        this.$store.state.blueIcon,
        this.$store.state.blueIcon,
        this.$store.state.greenIcon,
        this.$store.state.orangeIcon,
        this.$store.state.yellowIcon,
        this.$store.state.redIcon,
        this.$store.state.blueIcon,
        this.$store.state.greenIcon,
        this.$store.state.orangeIcon,
        this.$store.state.yellowIcon,
      ],
      menuCenter1: null,
      menuCenter3: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    handler({ BMapGL, map }) {
      let that = this;
      console.log(BMapGL);
      console.log(map);
      map.setMapStyle({
        styleJson: mapStyle,
      });
      this.map = map;
    },
    initMap() {
      let that = this;
      lazyBMapApiLoaderInstance.load().then(() => {
        // that.map = new BMapGL.Map("mapContainer");
        that.map = new BMapGL.Map("mapContainer", {
          restrictCenter: false,
        });
        window.$SOURCE_MAP = that.map;
        // 鼠标滚轮缩放
        that.map.enableScrollWheelZoom(true);
        // 自定义地图样式
        that.map.setMapStyleV2({
          styleJson: mapStyle,
        });
        // 设置地图类型
        that.map.setMapType("BMAP_NORMAL_MAP");
        // 调整地图的倾斜视角，范围通常是 0 到 45 度
        that.map.setTilt(45);
        // 初始化地图,设置中心点坐标和地图级别
        that.map.centerAndZoom(
          new BMapGL.Point(that.center.lng, that.center.lat),
          18
        );
        console.log(this.map);
        // 初始化坐标点并渲染
        this.initMarker();
      });
    },
    // 坐标 图标 id 坐标点类型 标注点所属菜单 标注点附加信息
    addMaker(point, icon, pointId, markerType, parentId, obj) {
      let that = this;
      let marker = new BMapGL.Marker(point, { icon });
      marker.pointId = pointId;
      // 标注点类型
      marker.type = markerType;
      // 标注点所属菜单
      marker.parentId = parentId;
      if (parentId == this.cureentMenu) {
        marker.show();
      } else {
        marker.hide();
      }
      marker.otherInfo = obj;
      if (!window["$MAP_MARKER"].has(pointId)) {
        window["$MAP_MARKER"].set(pointId, marker);
      }
      this.map.addOverlay(marker);
      marker.addEventListener("click", function () {
        // 自建房感知监测打开弹窗
        if (marker.type == "zjfgzjc") {
          that.openPoint(this.pointId, marker);
          // that.addContentInfo(this.pointId, marker, point);
        }
        // 智慧用电安全人员信息打开弹窗
        if (marker.type == "ptjmyh") {
          that.openPoint(this.pointId, marker);
          // that.addContentInfo(this.pointId, marker, point);
        }
      });
    },
    // 添加弹窗
    addContentInfo(id, marker, point) {
      let that = this;
      // 自建房坐标点详情
      buildingCoordinateDetail({ id }).then((res) => {
        let qxList = res.qxList ?? [];
        let lfList = res.lfList ?? [];
        let cjList = res.cjList ?? [];
        let ybList = res.ybList ?? [];
        let qxHtmlStr = qxList.length ? this.qxStr(qxList) : "";
        let lfHtmlStr = lfList.length ? this.lfStr(lfList) : "";
        let cjHtmlStr = cjList.length ? this.cjStr(cjList) : "";
        let ybHtmlStr = ybList.length ? this.ybStr(ybList) : "";
        let sContent = `<div class="point_pop_content"><p style='color:#0ff;'>
          工程名称：${marker.address}
          </p> 
          ${qxHtmlStr}
          ${lfHtmlStr}
          ${cjHtmlStr}
          ${ybHtmlStr}
          </div>`;
        let infoWindow = new BMapGL.InfoWindow(sContent);
        that.map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
    },
    // 初始化地图中的坐标点
    initMarker() {
      this.getPoints1();
      this.getPoints3();
      // this.getPoints4();
    },
    // 设置视角
    initVisualAngle() {},
    // 随菜单切换切换marker
    changeMarker(menu) {
      let markers = Array.from(window["$MAP_MARKER"].values());
      markers.forEach((item) => {
        if (item.parentId == menu) {
          item.show();
        } else {
          item.hide();
        }
      });
      let center =
        menu == 0
          ? this.menuCenter1
          : menu == 2
          ? this.menuCenter3
          : this.center;
      this.map.centerAndZoom(center, 18);
      this.map.setTilt(45);
    },
    // 首页地图坐标
    getPoints1() {
      let that = this;
      // 自建房建筑坐标
      buildingCoordinateData({}).then((res) => {
        let list = res ?? [];
        let pointsList = [];
        if (list.length) {
          list.forEach((item) => {
            if (item.address1726641623763) {
              let position = item.address1726641623763.split(",");
              pointsList.push(new BMapGL.Point(position[0], position[1]));
              let point = new BMapGL.Point(position[0], position[1]);
              let icon = new BMapGL.Icon(
                that.$store.state.redIcon,
                new BMapGL.Size(38, 86)
              );
              let obj = {
                name: item.shortText1726641450879,
                address: item.shortText1726641602533,
              };
              that.addMaker(point, icon, item.id, "zjfgzjc", 0, obj);
            }
          });

          // 获取合理的中心点
          // const centerPoint = that.map.getViewport(pointsList);
          // 初始化地图，设置中心点坐标和地图级别
          // that.map.centerAndZoom(centerPoint.center, centerPoint.zoom);
          that.menuCenter1 = pointsList[pointsList.length - 1];
          that.map.centerAndZoom(pointsList[pointsList.length - 1], 18);
          this.map.setTilt(45);
        }
      });
    },
    // 智慧用电安全地图坐标
    getPoints3() {
      let that = this;
      userStatisticsData({ currentPage: 1, pageSize: 1000000 }).then((res) => {
        let list = res.data ?? [];
        let pointsList = [];
        if (list.length) {
          list.forEach((item) => {
            if (item.lngAndLat) {
              let position = item.lngAndLat.split(",");
              pointsList.push(new BMapGL.Point(position[0], position[1]));
              let point = new BMapGL.Point(position[0], position[1]);
              let outIcon = new BMapGL.Icon(
                that.$store.state.grayIcon,
                new BMapGL.Size(38, 86)
              );
              let onIcon = new BMapGL.Icon(
                that.$store.state.greenIcon,
                new BMapGL.Size(38, 86)
              );
              let status =
                item.id.substring(0, 2) == "LX"
                  ? false
                  : item.id.substring(0, 2) == "ZX"
                  ? true
                  : null;
              let obj = {
                address: item.address,
                area: item.area,
                name: item.name,
                phone: item.phone,
                userIdentity: item.userIdentity,
                depName: item.depName,
                status,
              };
              let icon = status ? onIcon : outIcon;
              that.addMaker(point, icon, item.id, "ptjmyh", 2, obj);
            }
          });

          // 获取合理的中心点
          // const centerPoint = that.map.getViewport(pointsList);
          // // 初始化地图，设置中心点坐标和地图级别
          // // that.map.centerAnsdZoom(centerPoint.center, centerPoint.zoom);
          // that.menuCenter3 = centerPoint;
          that.menuCenter3 = pointsList[pointsList.length - 1];
          // that.map.centerAndZoom(pointsList[pointsList.length - 1], 18);
          // this.map.setTilt(45);
        }
      });
    },
  },
};   
